<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="pics/homescreen.gif" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<title>iWebKit Demo - Learn about what technologies drive iWebKit. Css3 and full 
screen mode!
</title>
<link href="pics/startup.png" rel="apple-touch-startup-image" />
<meta content="iPod,iPhone,Webkit,iWebkit,Website,Create,mobile,Tutorial,free" name="keywords" />
<meta content="CSS3 is at the core of the new iwebkit. It makes everything live and move. Learn more about the technology on this page" name="description" />
</head>

<body>

<div id="topbar">
	<div id="title">
		Technology</div>
	<div id="leftnav">
		<a href="index.html"><img alt="home" src="images/home.png" /></a> </div>
	<div id="rightnav">
		<a href="navigation.html">Navigation</a> </div>
</div>
<div id="content">
	<span class="graytitle">What technologies are used?</span>
	<ul class="pageitem">
		<li class="textbox"><span class="header">Fullscreen enabled</span><p>
		Simply click the <strong>+</strong> sign in safari and &quot;<strong>Add to 
		Homescreen</strong>&quot;. Once that is done you will see a custom icon popup 
		on the homescreen. Open it up and you will notice that iWebKit is now 
		entirely fullscreen! Moreover it has a nice startup image! This is the 
		only multi-page kit available with fullscreen functionnality.</p>
		</li>
	</ul>
	<ul class="pageitem">
		<li class="textbox"><span class="header">CSS3, the root of everything</span><p>
		Most advanced effects and features are made available thanks to advanced 
		and often experimental css3 proprties. Css is the language that is used 
		to style your html document setting for example text colors and 
		backgrounds. Most modern browsers only have full support for css 2.1 
		since css3 is still under development but &quot;webkit&quot; based browers (it&#39;s a 
		rendering engine) like safari and google chrome are able to use the new 
		propertes nativly already! this opens up a whole new windows of 
		opportunities. I will explain some of the technologies used&nbsp; in 
		iWebKit in the following paragraphs.</p>
		<span class="header">Images? no gradients!</span><p>Instead of using 
		images to style the page like previous versions of iWebkit most images 
		are now generated by the iphone itself. Indeed they are replaced by 
		generated gradients. this means that the browser only has to load a 
		couple of letters and numbers instead of loading an entire image 
		reducing load times and, of course, the number of times the server gets 
		&quot;called&quot;.</p>
		<span class="header">Border Images</span><p>Instead of using huge 
		background images iwebkit is using border images. this means a small 
		image is stretched over it&#39;s entire container making the background 
		scalable to content and reducing image size (if they are not already 
		replaced by a gradient!). Another &quot;border&quot; technology is the use of 
		rendered round borders avoiding &quot;corner images&quot;. All this to reduce load 
		times of course!</p>
		<span class="header">Landscape and portrait</span><p>Landscape position 
		is automaticly detected by the browser and thanks to some css the size 
		of some elements can change dynamicly. all this without the use of heavy 
		javascript.</p>
		<span class="header">selecting elements</span><p>For those really into 
		styling webpages you can use css3 to select only certain elements; for 
		example you could only style odd or even elements, wich I do with list 
		styles; or only the first or last one.</p>
		<span class="header">Styling form elements</span><p>Finnaly it is 
		possible to style form elements using only css. As you might have 
		noticed the previous versions of iWebKit used javascript to style the 
		elements wich resulted in messy and buggy results.</p>
		<span class="header">Other additions</span><p>There are a lot of other 
		minor technologies used in iWebKit like for example, generated shadows 
		or rotated elements, all reducing the number of images needed to 
		perfectly render the page. All these technologies are revolutionary and 
		represent the future of the web. iWebKit is a window into that future 
		world!</p>
		</li>
	</ul>
</div>
<div id="footer">
	<!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) -->
	<a class="noeffect" href="http://snippetspace.com">iPhone site powered by iWebKit</a></div>

</body>

</html>
